<script setup>
import store from '@/store/index.js';
import { useCharts, useWatch } from '@/hooks';
const props = defineProps({
  type: { type: String, default: () => null },
  options: { type: Object, default: () => ({}) },
  opts: { type: Object, default: () => null },
});
defineEmits();
const { type, options, opts } = toRefs(props);
const chartRef = shallowRef();
const { charts, setOptions, initChart } = useCharts({ type, el: chartRef });
const $$chart = ref();
// onActivated(async () => {
//   await nextTick(() => {
//     charts.value?.dispose();
//     initChart();
//     setOptions(options.value, opts.value ?? true);
//   });
// });
onMounted(async () => {
  await nextTick(() => {
    setTimeout(() => {
      initChart();
      setOptions(options.value, opts.value ?? true);
      $$chart.value = charts.value;
    }, 500);
  });
});
useWatch(
  [options, opts],
  ([n, nOpts]) => {
    if (nOpts) {
      setOptions(n, nOpts);
    } else {
      setOptions(n);
    }
  },
  { deep: true },
);
useWatch(
  () => store.state.global.setting.sideTheme,
  () => {
    setOptions(options.value, opts.value ?? true);
  },
  { deep: true },
);

defineExpose({ $$chart });
</script>

<template>
  <div class="ce-charts" ref="chartRef"></div>
</template>

<style lang="scss" scoped>
.ce-charts {
  width: 100%;
  height: 100%;
  min-height: 200px;
}
</style>
